// components/pinglun/pinglun.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    show: Boolean, // 控制弹窗显示/隐藏
    questionId: {
      type: Number,
      value: 0
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    showModal: false, // 控制弹窗显示的内部状态
    animation: {}, // 弹窗动画
    content: '' // 评论内容
  },

  /**
   * 监听属性变化
   */
  observers: {
    'show': function (newShow) {
      // 只在明确设置为true且弹窗当前是关闭状态时打开弹窗
      if (newShow && !this.data.showModal) {
        this.setData({ showModal: true });
        this.openModal();
      }
      // 只有当外部show=false且弹窗当前是打开状态时才关闭
      else if (!newShow && this.data.showModal) {
        this.closeModal();
      }
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 阻止事件冒泡
    stopPropagation: function () {
      // 阻止事件冒泡，防止点击弹窗内容时关闭弹窗
    },

    // 初始化动画
    initAnimation: function () {
      this.animation = wx.createAnimation({
        duration: 300,
        timingFunction: 'ease',
      });
    },

    // 打开弹窗
    openModal: function () {
      // 确保动画已初始化
      if (!this.animation) {
        this.initAnimation();
      }

      // 添加弹出动画
      this.animation.translateY(500).step();
      this.setData({
        animation: this.animation.export()
      });

      // 然后回到原位，形成从下往上弹出的效果
      setTimeout(() => {
        this.animation.translateY(0).step();
        this.setData({
          animation: this.animation.export()
        });
      }, 10);
    },

    // 关闭弹窗
    closeModal: function () {
      // 确保动画已初始化
      if (!this.animation) {
        this.initAnimation();
      }

      this.animation.translateY(500).step();
      this.setData({
        animation: this.animation.export()
      });

      // 动画结束后隐藏弹窗
      setTimeout(() => {
        this.setData({
          showModal: false,
          content: '' // 清空内容
        });
        // 触发关闭事件通知父组件
        this.triggerEvent('close');
      }, 300);
    },

    // 提交评论
    submit: function () {
      const { content } = this.data;

      // 验证评论内容
      if (!content.trim()) {
        wx.showToast({
          title: '请输入评论内容',
          icon: 'none',
          duration: 2000
        });
        return;
      }

      if (content.length > 500) {
        wx.showToast({
          title: '评论内容不能超过500字',
          icon: 'none',
          duration: 2000
        });
        return;
      }

      // 显示加载中
      wx.showLoading({
        title: '提交中...',
        mask: true
      });

      // 获取题目ID（从父组件传递）
      const questionId = this.properties.questionId;

      if (!questionId) {
        wx.hideLoading();
        wx.showToast({
          title: '题目信息错误',
          icon: 'none',
          duration: 2000
        });
        return;
      }

      // 调用API提交评论
      const app = getApp();
      app.api.addComment({
        questionId: questionId,
        content: content
      }).then(res => {
        wx.hideLoading();
        wx.showToast({
          title: '评论提交成功！',
          icon: 'success',
          duration: 2000
        });
        // app.api.donationcreate({
        //   targetId: res.data.id,  // 使用评论ID作为目标ID
        //   type: 2  // 2表示评论类型，1表示纠错类型
        // }).then(res => {
        //   console.log(res.data)
        // })

        // 清空内容并关闭弹窗
        this.setData({
          content: '',
          showModal: false
        });
        // 触发提交事件并传递数据给父组件
        this.triggerEvent('submit', {
          content: content,
          commentId: res.data.id
        });

        // 提交后关闭弹窗
        this.closeModal();
      }).catch(err => {
        wx.hideLoading();
        console.error('提交评论失败:', err);

        let errorMsg = '评论提交失败';
        if (err.message) {
          errorMsg = err.message;
        }

        wx.showToast({
          title: errorMsg,
          icon: 'none',
          duration: 2000
        });
      });
    },

    // 输入内容变化
    onContentChange: function (e) {
      this.setData({
        content: e.detail.value
      });
    }
  },

  /**
   * 生命周期
   */
  attached: function () {
    this.initAnimation();
  }
});